/*
  学习目标：v-color="颜色" 给不用的标签, 设置不同的颜色
*/
import Vue from "vue";
import App from "./App.vue";

import "bootstrap/dist/css/bootstrap.css";

Vue.config.productionTip = false;

// Vue.directive("指令名称", 指令配置对象)
Vue.directive("color", {
  /**
   * 作用： 在指令所在的标签， 插入dom时，自动执行的一个函数
   * 注意：💥 只会在第一次执行
   * el： 所在标签的dom元素
   * xxx: 指令接收到的数据， 组成的一个对象
   */
  inserted(el, xxx) {
    el.style.color = xxx.value;
  },

  /**
   * 作用：在指令接收到的数据, 变化时自动执行
   * el： 所在标签的dom元素
   * xxx: 指令接收到的数据， 组成的一个对象
   */
  update(el, xxx) {
    el.style.color = xxx.value;
  },
});

new Vue({
  render: (h) => h(App),
}).$mount("#app");
